<template>
  <div class="alarmLevel-root">
    <formTitleVue
      title="风险类别分布"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <!-- <div id="echarts-types"></div> -->
    <myPieRing domId="earlyWarning-alarmLevel-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myPieRing from '@/components/Echarts/myPieRing.vue';
import { time_select_optios } from '@/utils/global.js';
import { riskHazardBclassifyStatistics
} from '@/api/risk/riskHazard'
import { treeDataList } from '@/api/risk/treeData'
export default {
  name: "alarmLevel",
  components: {
    formTitleVue,myPieRing,
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "",
          options: this.bclassifyList,
          changeFn: this.selectChange2,
        },
        {
          selectValue: "近一月",
          options:[
            { label: "近一月", value: "近一月" },
            { label: "近半年", value: "近半年" },
            { label: "近一年", value: "近一年" },
          ],
          changeFn: this.selectChange,
        },
      ],
      chartsData: {

        yData: [],
      },
      echartsOption:{

      },
      searChForm: {
        startTime: '',
        endTime: '',
        areaCode:'',
        placeType:'',
        bclassify:'',
      },
      bclassifyList:[]
    };
  },
  watch:{
    'bclassifyList':{
      handler(newVal, oldVal) {
        this.selectOptions[0].options = newVal
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    selectChange(item) {
      console.log(item);
      this.searChForm.startTime = time_select_optios[item].startTime
      this.searChForm.endTime = time_select_optios[item].endTime
      this.getData();
    },
    selectChange2(item){
      this.searChForm.bclassify = item
      this.getData()
    },
    async getData(){

      let respon =[]
      this.searChForm.areaCode = this.$store.state.account.user.deptIds;
      this.searChForm.placeType = this.$commonJs.getPlaceType(this.searChForm.areaCode);
      respon = await riskHazardBclassifyStatistics(this.searChForm);
       let res = respon.data.report;

      // let res = [
      //       {value:3981, name:"市政设施"},
      //       {value:5928, name:"房屋建筑"},
      //       {value:2093, name:"交通设施"},
      //       {value:2198, name:"在建工地"},
      //       {value:3122, name:"人密区域"},
      //     ];
      // 模拟接口数据
      // let res = [
      //   {value: 335, name: '市政设施'},
      //   {value: 110, name: '房屋建筑'},
      //   {value: 160, name: '人员密集区域'},
      // ]
      this.chartsData.yData = [
        {
          name:"风险类别分布",
          radius : ['40%', '60%'],
          center: ["30%", "50%"],
          data: res
        }
      ]
      let total = 0
      // 给每个饼块统一添加引导文字
      this.chartsData.yData.forEach(item => {
        item.data.forEach(item => {
          // 隐藏引导线和文字
          item.label = {
            normal:{
              show: false,
              formatter: "{b}\n{d}%",
            },
          }
          item.labelLine = {
            show: false,
          }
          total += item.value
        })
      })
      this.echartsOption = {
        title:{
          text: `风险总数`,
          left: "29%",
          top: "42%",
          textVerticalAlign:'top',
          textAlign:'center',
          textStyle: {
            color: "#5A5A5A",
            fontSize: 12,
          },
          subtext: total,
          subtextStyle: {
            // verticalAlign:'top',
            color: "#5A5A5A",
            fontSize: 16,
          },
        },
        legend:{
          orient: 'vertical',
          top: 'middle',
          right: '5%',
          // formatter: 'Legend {name}',
          // 使用回调函数
          formatter: function (name) {
            for(let item of res){
              if(item.name == name){
                let p
                if(total == 0 || !item.value){
                  p = 0
                }else{
                  p = (item.value/total*100).toFixed(2)
                }
                return `${name} ${item.value} 占比${p}%`
              }
            }
          }
        }
      }
    },
    getBclassifyList(){
      treeDataList({name:"hazardBClassify"}).then(res=>{
        if(res.code==200)  {
          this.bclassifyList = res.data.map(t=>{return {label:t.label, value:t.code}})
          this.bclassifyList.unshift({label:"全部", value:""})
        }
      })
    }
  },
  created(){
    this.getBclassifyList()
  },
  mounted() {
    // console.log(this.$store.state.account.user.deptIds)
    //this.getData();
    this.selectChange("近一月");
  },
};
</script>

<style lang="scss" scoped>
.alarmLevel-root {
  #echarts-alarmLevel {
    height: 30vh;
  }
}
</style>
